import markdownItContainer from 'markdown-it-container'
import { BaseRenderer } from './BaseRenderer'
import './markdownItContainer.css'

/**
 * Container渲染器类（继承 BaseRenderer）
 */
class ContainerRenderer extends BaseRenderer {
  constructor() {
    super()
  }
}

// 注意：样式已经通过 CSS 文件导入，不再需要动态加载

// 创建全局的 ContainerRenderer 实例
const globalContainerRenderer = new ContainerRenderer()

// 自定义容器插件
export default function markdownItContainerPlugin(md) {
  // 样式已经通过 CSS 文件导入，不需要动态加载
  // 添加自定义容器 - 使用简单的cell组件布局
  md.use(markdownItContainer, 'cell', {
    validate: function(params) {
      return params.trim().match(/^cell\s+(\d+)$/)
    },
    render: function (tokens, idx) {
      try {
        var m = tokens[idx].info.trim().match(/^cell\s+(\d+)$/)
        if (tokens[idx].nesting === 1) {
          // opening tag - 返回cell开始标签，只使用宽度类
          var width = parseInt(m[1])
          if (isNaN(width) || width < 1 || width > 12) {
            throw new Error(`Cell 宽度必须在 1-12 之间，当前值: ${m[1]}`)
          }
          return '<div class="md-cell cell-' + width + '">\n'
        } else {
          // closing tag - 返回cell结束标签
          return '</div>\n'
        }
      } catch (error) {
        console.error('Container渲染错误:', error)
        
        // 收集错误到全局实例
        globalContainerRenderer.addError({
          type: 'Container',
          message: error.message,
          code: tokens[idx].info
        })
        
        return `<div class="error">Container渲染错误: ${error.message}</div>\n`
      }
    }
  })

  // 添加自定义容器
  ;['info', 'warning', 'danger', 'success'].forEach(type => {
    md.use(markdownItContainer, type, {
      validate: function(params) {
        return params.trim().match(new RegExp(`^${type}$`))
      },
      render: function(tokens, idx) {
        try {
          if (tokens[idx].nesting === 1) {
            // 获取容器内容
            let containerContent = ''
            let i = idx + 1
            while (i < tokens.length && tokens[i].nesting !== -1) {
              if (tokens[i].type === 'inline' && tokens[i].content) {
                containerContent += tokens[i].content + '\n'
              }
              i++
            }
            
            const containerHtml = `<div class="${type}">\n`
            return containerHtml
          } else {
            return '</div>\n'
          }
        } catch (error) {
          console.error('Container渲染错误:', error)
          
          // 收集错误到全局实例
          globalContainerRenderer.addError({
            type: 'Container',
            message: error.message,
            code: tokens[idx].info
          })
          
          return `<div class="error">Container渲染错误: ${error.message}</div>\n`
        }
      }
    })
  })
}


// 导出渲染器类和全局实例供外部使用
export { ContainerRenderer, globalContainerRenderer }
